<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <QfPage title="题库管理">
   <template #hd>
     <el-row>
       <el-col :span="5">
         <el-button @click="centerDialogVisible=true">新增</el-button>
       </el-col>
   <el-col :span="7">
         <el-input v-model="keyword" placeholder="请输入你要搜索的问题" />
       </el-col>
       <el-col :span="6">
         开始时间
         <el-date-picker
           v-model="stime"
           type="date"
           placeholder="Pick a day"
         />
       </el-col>
       <el-col :span="6">
         结束
         <el-date-picker
           :disabled-date="countEndTime"
           v-model="etime"
           type="date"
           placeholder="Pick a day"
         />
       </el-col>
     </el-row>
   </template>
   <el-table :data="tableData" style="width: 100%">
   <el-table-column prop="id" label="问题id" width="180" />
   <el-table-column prop="title" label="问题标题" width="180" />
   <el-table-column prop="createdAt" label="创建时间">
     <template #default="{ row }">
       {{ formatTime(row.createdAt, 'YYYY-MM-DD HH:mm') }}
     </template>
   </el-table-column>
 </el-table>
 <template #ft>
     <el-pagination
       small
       background
       layout="prev, pager, next,sizes"
       :total="total"
       class="mt-4"
       :page-sizes="[5, 10, 30, 50]"
       @size-change="handleSizeChange"
       @current-change="handlePageChange"
     />
   </template>
 <!-- 添加问题的弹窗 -->
 <el-dialog v-model="centerDialogVisible" title="新增一个问题" fullscreen  width="60%" center>
   <el-form :model="questionInfo" ref="addForm" label-width="110px">
     <el-form-item label="公司名称">
         <el-input v-model="questionInfo.companyNmae" disabled>
           <template #suffix>
             <button @click="showCompanyList = true">选择公司</button>
           </template>
         </el-input>
       </el-form-item>
   <el-form-item label="标题">
     <el-input v-model="questionInfo.title"/>
   </el-form-item>
   <el-form-item>
         <vue-qrcode
           :value="`http://localhost:8080/#/uploadImg?uuid=${uuid}`"
           :options="{ width: 200 }"
         ></vue-qrcode>
       </el-form-item>
   <el-form-item label="问题描述">
     <v-md-editor
     v-model="questionInfo.content"
     height="400px"
     :disabled-menus="[]"
     @upload-image="handleUploadImage"
     ></v-md-editor>
   </el-form-item>
   <el-form-item label="标签"> </el-form-item>
 </el-form>
 <template #footer>
   <el-button @click="confirm">添加</el-button>
 </template>
 <companyPicker :innerVisible="showCompanyList" @change="hadleCompanyChange"></companyPicker>
 </el-dialog>
  </QfPage>
</template>
<script setup lang="ts">
import axios from 'axios';
import { addQuestion, getQuestList } from '@/api/qa';
import { ElMessage } from 'element-plus';
// eslint-disable-next-line import/no-extraneous-dependencies
import dayjs from 'dayjs';
// eslint-disable-next-line import/no-extraneous-dependencies
import _ from 'lodash';
import { ref, reactive } from 'vue';

const keyword = ref<string>('');
const tableData = reactive

  data() {
    return {
      stime: new Date(),
      etime: null,

      tableData: [],
      centerDialogVisible: false,
      showCompanyList: false,
      questionInfo: {
        companyNmae: '',
        companyId: '',
        title: '',
        content: '',
        tags: '',
        uid: '',
      },
      uuid: '',
      total: 0,
      limit: 5,
      curPage: 1,
    };
  },
  created() {
    this.getList();
  },
  computed: {
    skip() {
      return (this.curPage - 1) * this.limit;
    },
  },
  watch: {
    keyword(nv) {
      console.log('搜索的关键字发生了变化', nv);
      this.curPage = 1;
      this.getList();
    },
  },
  methods: {
    countEndTime(time) {
      const t = time.getTime();
      const st = this.stime.getTime();
      const d = new Date();
      d.setHours(23, 59, 59, 99);
      const lt = d.getTime();
      if (t > lt || st > t) return true;
      return false;
    },
    handlePageChange(res) {
      console.log('页面发生了变化', res);
      this.curPage = res;
      this.getList();
    },
    handleSizeChange(res) {
      console.log('每页条数发生变化', res);
      this.limit = res;
      this.getList();
    },
    hadleCompanyChange(res) {
      console.log('选择的公司是', res);
      this.questionInfo.companyNmae = res.name;
      this.questionInfo.companyId = res.id;
      this.showCompanyList = false;
    },
    async confirm() {
      console.log('我是添加的操作', this.questionInfo);
      const { companyId, title, content } = this.questionInfo;
      const res = await addQuestion({
        companyId,
        title,
        content,
        tags: 'consequat consectetur cillum Lorem commodo',
        uid: '86',
      });
      console.log('res', res);
      // eslint-disable-next-line
     const { statusText, data } = res;
      if (statusText === 'Created') {
        ElMessage({
          message: '添加到成功',
          type: 'success',
        });
        this.centerDialogVisible = false;

        this.questionInfo = {
          companyName: '',
          companyId: '',
          title: '',
          content: '',
          tags: '',
          uid: '',
        };
        this.getList();
      }
    },
    handleUploadImage(event, insertImage, files) {
      console.log('files', files);

      const uploadinfo = new FormData();
      uploadinfo.append('type', '2205');
      uploadinfo.append('files', files[0]);
      axios.post('http://www.wzsqyg.com/attachment/upload', uploadinfo).then((res) => {
        console.log('上传的结果', res);
        insertImage({
          url: res.data.msg,
          desc: res.data.msg.split('/').pop(),
        // width: 'auto',
        // height: 'auto',
        });
      });
    },
    // eslint-disable-next-line
   getList: _.debounce(async function () {
      const queryData = {};
      if (this.keyword) queryData.title = this.keyword;
      const res = await getQuestList({
        $limit: this.limit,
        $skip: this.skip,
        ...queryData,
      });
      console.log('res', res);
      this.tableData = res.data.data;
      this.total = res.data.total;
    }, 300),
    formatTime(_d, str) {
      return dayjs(_d).format(str);
    },
  },
</script>
<script lang="ts">
export default {
 name: 'qupage',
}
</script>
<style lang="scss" scoped>

</style>
